axios.interceptors.request.use(
    (config) => {
        config.headers['Authorization'] = 'Bearer' + ' ' + localStorage.getItem('token')
        return config
    },
    (error) => {
        return Promise.reject(error)
    }
)
axios.interceptors.response.use(
    (res) => {
        return res
    },
    (error) => {
        if (error.response.status == 401) {
            localStorage.removeItem('token')
            location.href = '../login.html'
        }
        return Promise.reject(error)
    }
)

let userinfo = JSON.parse(localStorage.getItem('userinfo'))
document.querySelector('.username').innerHTML = userinfo.phone

// 渲染
function render(data) {
    let str = ''
    str += data.map((item) => {
        return `<tr>
        <td><input type="checkbox" name="" id=""></td>
        <td>${item.id}</td>
        <td>${item.num}</td>
        <td>${item.name}</td>
        <td>${item.sort}</td>
        <td>
        <span class="${item.status ? 'status' : 'error'}">${item.status ? '正常' : '异常'}</span>
        </td>
        <td>${item.date}</td>
        <td>
            <span class="xiugai"><span class="iconfont "># </span>修改</span>
            <span class="shanchu"><span class="iconfont "># </span>删除</span>
        </td>
    </tr>`
    }).join('')
    if (str == '') {
        str = `<tr>
                <td colspan="8" class="error-null">未能查询到相关数据</td>
            </tr>`
        document.querySelector('.total').innerHTML = total
        document.querySelector('.page').innerHTML = page
        document.querySelector('tbody').innerHTML = str
    } else {
        document.querySelector('.total').innerHTML = total
        document.querySelector('tbody').innerHTML = str
        document.querySelector('.page').innerHTML = page
    }

}
// 分页
let prev = document.querySelector('.prev')
let next = document.querySelector('.next')

let page = 1, total = 1
prev.disabled = true
renderAsk(page)
// 封装一个渲染列表请求
function renderAsk(page) {
    axios.get('/post/list', { params: { page: page, count: 5 } }).then((res) => {
        total = res.data.total
        render(res.data.list)
    })
}
// 封装一个模糊查询请求
function searchAsk() {
    axios.get('/post/search', { params: { searchkey: searchInput.value} }).then((res) => {
        total = res.data.total
        render(res.data.list)
    })
}

// 点击上一页
prev.onclick = () => {
    next.disabled = false
    if (page > 1) {
        renderAsk(--page)
        if (page == 1) {
            prev.disabled = true
        }
    }
}
// 点击下一页
next.onclick = () => {
    prev.disabled = false
    if (page < total) {
        renderAsk(++page)
        if (page == total) {
            next.disabled = true
        }
    }
}

// 查询
let searchInput = document.querySelector('.find input')
document.querySelector('.search').onclick = () => {
    page = 1
    prev.disabled = true
    next.disabled = false
    searchAsk()
}

// 删除
document.querySelector('tbody').onclick = (e) => {
    if (e.target.classList.contains('shanchu')) {
        axios.post('/post/delete', { phone: e.target.dataset.phone }).then((res) => {
            renderAsk(page)
        })
    }
}